<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datares">
                  <div class="ra">我的足迹</div>
                  <div class="asdasda">
                    <span style="margin-left: 70px;">浏览详情</span>
                    <span @click="showx" style="display: block;text-align: right;width: 65%;color: blue;">{{shanqu}}</span>
                    <span @click="shoxs" style="margin-left:10px;color: blue;">全部删除</span>
                  </div>
                  <!-- <span>清空全部</span> -->
                  <div>
                    <ul class="rfurgruigrt">
                      <li>
                        <div class="wieiehf" @click="$router.push('/details23')">
                          <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                          <div class="uftax">
                            <span>兰蔻小黑瓶眼霜精华...</span>
                            <p>市场指导价：20份</p>
                          </div>
                        </div>
                        <div class="lmenb" v-if="shows" @click="shancs">
                          <i class="el-icon-delete lmenbcon"></i>
                        </div>
                      </li>
                      

                      <li @click="$router.push('/details23')">
                        <div class="wieiehf">
                          <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                          <div class="uftax">
                            <span>兰蔻小黑瓶眼霜精华...</span>
                            <p>市场指导价：20份</p>
                          </div>
                        </div>
                        <div>
                          <el-checkbox class="lchecs" @click.stop.native="aa($event)"></el-checkbox>
                        </div>
                      </li>
                     


                      <router-link to="/details23">
                        <li>
                          <div class="wieiehf">
                            <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                            <div class="uftax">
                              <span>兰蔻小黑瓶眼霜精华...</span>
                              <p>市场指导价：20份</p>
                            </div>
                          </div>
                        </li>
                      </router-link>
                      <router-link to="/details23">
                        <li>
                          <div class="wieiehf">
                            <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                            <div class="uftax">
                              <span>兰蔻小黑瓶眼霜精华...</span>
                              <p>市场指导价：20份</p>
                            </div>
                          </div>
                        </li>
                      </router-link>
                      <router-link to="/details23">
                        <li>
                          <div class="wieiehf">
                            <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                            <div class="uftax">
                              <span>兰蔻小黑瓶眼霜精华...</span>
                              <p>市场指导价：20份</p>
                            </div>
                          </div>
                        </li>
                      </router-link>
                      <router-link to="/details23">
                        <li>
                          <div class="wieiehf">
                            <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                            <div class="uftax">
                              <span>兰蔻小黑瓶眼霜精华...</span>
                              <p>市场指导价：20份</p>
                            </div>
                          </div>
                        </li>
                      </router-link>
                      <router-link to="/details23">
                        <li>
                          <div class="wieiehf">
                            <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                            <div class="uftax">
                              <span>兰蔻小黑瓶眼霜精华...</span>
                              <p>市场指导价：20份</p>
                            </div>
                          </div>
                        </li>
                      </router-link>
                      <router-link to="/details23">
                        <li>
                          <div class="wieiehf">
                            <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                            <div class="uftax">
                              <span>兰蔻小黑瓶眼霜精华...</span>
                              <p>市场指导价：20份</p>
                            </div>
                          </div>
                        </li>
                      </router-link>
                      <router-link to="/details23">
                        <li>
                          <div class="wieiehf">
                            <div class="ehuiih"><img src="@/assets/img/ww.png" alt=""></div>
                            <div class="uftax">
                              <span>兰蔻小黑瓶眼霜精华...</span>
                              <p>市场指导价：20份</p>
                            </div>
                          </div>
                        </li>
                      </router-link>

                    </ul>
                  </div>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
import axios from 'axios'
export default {
    components: {
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
       inuser:'',
       shows:false,
       shanqu:"删除"
      }

    },
    methods: {
      shancs(){
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
      },
      aa(e){
        
        if (e.target.tagName === 'INPUT') return // 因为原生click事件会执行两次，第一次在label标签上，第二次在input标签上，故此处理
        // if (this.uploadStatus === index.toString()) {
        //   this.uploadStatus = '-1'
        // }
        // console.log(e)
        console.log(e.target.tagName)
        alert(1)
      },
      showx(){
        
        if(this.shanqu=="删除"){
          this.shanqu="取消"
          this.shows=true
        }else{
          this.shows=false
          this.shanqu="删除"
        }
      },
      shoxs(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datares {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}

.datares .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.asdasda {
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #434343;
  border-bottom: 1px solid #dcdcdc;
  margin-top: 20px;
    line-height: 46px;
    color: #434343;
    display: flex;
}
.wieiehf {
	width: 200px;
	height: 200px;
	border: solid 1px #eeeeee;
}
.ehuiih {
  	width: 200px;
	height: 130px;
}
.ehuiih img {
  	width: 200px;
	height: 130px;
}
.uftax {
  height: 70px;
  line-height: 35px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  margin-left: 10px;
}
.uftax span{
  	font-family: SourceHanSansCN-Regular;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
}
.uftax p{
  	font-family: SourceHanSansCN-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #313131;
}
.rfurgruigrt {
  float: left;
  margin-top: 10px;
}
.rfurgruigrt li {
  display: inline-block;
  margin-left: 12px;
  margin-top: 10px;
  cursor: pointer;
  position: relative;
}
.lchecs{
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.lmenb{
  width: 202px;
  height: 202px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 999;
}
/*小图标*/
.lmenbcon{
  font-size: 30px;
  line-height: 130px;
  padding-left: 85px;
  display: none;
}
.lmenb:hover .lmenbcon{
  display: block;
}
</style>